import { Meta, StoryFn } from "@storybook/react"
import { Button, Table } from "antd"

import DataList from "./DataList"
// import * as ExcelJs from "exceljs"
// import { generateHeaders, saveWorkbook } from "../../../utils/excelUtils"

export default {
	title: "DataList",
	component: DataList
} as Meta

const Template: StoryFn = (args: any) => <DataList {...args} />

export const Default = Template.bind({})

Default.args = {
	data: [
		{ data1: "Value 1", data2: "Value 2", data3: "Value 3", age: 18, data4: "aa" },
		{ data1: "Value 4", data2: "Value 5", data3: "Value 6", age: 20, data4: "bb" },
		{ data1: "Value 4", data2: "Value 5", data3: "Value 6", age: 20, data4: "bb" },
		{ data1: "Value 4", data2: "Value 5", data3: "Value 6", age: 20, data4: "bb" },
		{ data1: "Value 4", data2: "Value 5", data3: "Value 6", age: 20, data4: "bb" },
		{ data1: "Value 4", data2: "Value 5", data3: "Value 6", age: 20, data4: "bb" },
		{ data1: "Value 4", data2: "Value 5", data3: "Value 6", age: 20, data4: "bb" },
		{ data1: "Value 4", data2: "Value 5", data3: "Value 6", age: 20, data4: "bb" },
		{ data1: "Value 4", data2: "Value 5", data3: "Value 6", age: 20, data4: "bb" },
		{ data1: "Value 4", data2: "Value 5", data3: "Value 6", age: 20, data4: "bb" },
		{ data1: "Value 4", data2: "Value 5", data3: "Value 6", age: 20, data4: "bb" },
		{ data1: "Value 4", data2: "Value 5", data3: "Value 6", age: 20, data4: "bb" },
		{ data1: "Value 4", data2: "Value 5", data3: "Value 6", age: 20, data4: "bb" },
		{ data1: "Value 4", data2: "Value 5", data3: "Value 6", age: 20, data4: "bb" },
		{ data1: "Value 4", data2: "Value 5", data3: "Value 6", age: 20, data4: "bb" },
		{ data1: "Value 4", data2: "Value 5", data3: "Value 6", age: 20, data4: "bb" },
		{ data1: "Value 4", data2: "Value 5", data3: "Value 6", age: 20, data4: "bb" },
		{ data1: "Value 4", data2: "Value 5", data3: "Value 6", age: 20, data4: "bb" },
		{ data1: "Value 4", data2: "Value 5", data3: "Value 6", age: 20, data4: "bb" },
		{ data1: "Value 4", data2: "Value 5", data3: "Value 6", age: 20, data4: "bb" },
		{ data1: "Value 4", data2: "Value 5", data3: "Value 6", age: 20, data4: "bb" },
		{ data1: "Value 4", data2: "Value 5", data3: "Value 6", age: 20, data4: "bb" },
		{ data1: "Value 4", data2: "Value 5", data3: "Value 6", age: 20, data4: "bb" },
		{ data1: "Value 4", data2: "Value 5", data3: "Value 6", age: 20, data4: "bb" },
		{ data1: "Value 4", data2: "Value 5", data3: "Value 6", age: 20, data4: "bb" }

		// Add more data if needed
	],
	statisticsPosition: "top",
	statisticDom: () => <div style={{ textAlign: "center", color: "red", fontSize: "20px" }}>随便你怎么展示这个内容</div>, // 这个代码不是自定义统计要展示的内容？
	bordered: true,
	summary: () => (
		<Table.Summary fixed>
			<Table.Summary.Row>
				<Table.Summary.Cell index={0}>Summary</Table.Summary.Cell>
				<Table.Summary.Cell index={1}>怎么不能自己总结总结</Table.Summary.Cell>
			</Table.Summary.Row>
		</Table.Summary>
	),
	pagination: {
		showSizeChanger: true,
		current: 1,
		pageSizeOptions: ["10", "20", "30", "40", "50"],
		pageSize: 10,
		showQuickJumper: true,
		showTotal: (total: number) => `共 ${total} 条`,
		total: 100
	},
	maxHeight: "500px",
	buttons: [],
	// buttons: [
	// 	{
	// 		label: "导出",
	// 		onClick: () => {
	// 			const onExportBasicExcel = () => {
	// 				// 创建工作簿
	// 				const workbook = new ExcelJs.Workbook()
	// 				// 添加sheet
	// 				const worksheet = workbook.addWorksheet("demo sheet")
	// 				// 设置 sheet 的默认行高
	// 				worksheet.properties.defaultRowHeight = 20
	// 				// 设置列
	// 				worksheet.columns = generateHeaders([
	// 					{ dataIndex: "data1", key: "data1", title: "Header 1", titleText: "Header 1", sortable: true },
	// 					{ dataIndex: "data2", key: "data2", title: "Header 2", titleText: "Header 2", sortable: true },
	// 					{ dataIndex: "data3", key: "data3", title: "Header 3", titleText: "Header 3", sortable: true },
	// 					{
	// 						dataIndex: "age",
	// 						key: "age",
	// 						title: "Age",
	// 						titleText: "Age",
	// 						sortable: true,
	// 						defaultSortOrder: "descend",
	// 						sorter: (a: any, b: any) => a.age - b.age
	// 					},
	// 					{
	// 						dataIndex: "data4",
	// 						key: "data4",
	// 						title: "Header 4",
	// 						titleText: "Header 4",
	// 						sortable: true,
	// 						fixed: "right",
	// 						render: (row: any) => <Button type="primary">{row}</Button>
	// 					}
	// 					// Add more columns if needed
	// 				])
	// 				// 添加行
	// 				worksheet.addRows([
	// 					{ data1: "Value 1", data2: "Value 2", data3: "Value 3", age: 18, data4: "aa" },
	// 					{ data1: "Value 4", data2: "Value 5", data3: "Value 6", age: 20, data4: "bb" }
	// 					// Add more data if needed
	// 				])
	// 				// 导出excel
	// 				saveWorkbook(workbook, "test.xlsx")
	// 			}
	// 			console.log("Export clicked")
	// 			onExportBasicExcel()
	// 		}
	// 	},
	// 	{ label: "列设置", onClick: () => console.log("Column settings clicked") },
	// 	{ label: "单元格间距", onClick: () => console.log("Cell spacing clicked") }
	// ],
	columns: [
		{ dataIndex: "data1", key: "data1", title: "Header 1", titleText: "Header 1", sortable: true },
		{
			dataIndex: "data2",
			key: "data2",
			title: () => <span style={{ color: "blue" }}>Header 2</span>,
			titleText: "Header 2",
			sortable: true
		},
		{ dataIndex: "data3", key: "data3", title: "Header 3", titleText: "Header 3", sortable: true },
		{
			dataIndex: "age",
			key: "age",
			title: "Age",
			titleText: "Age",
			sortable: true,
			defaultSortOrder: "descend",
			sorter: (a: any, b: any) => a.age - b.age
		},
		{
			dataIndex: "data4",
			key: "data4",
			title: () => <span style={{ color: "red" }}>Header 4</span>,
			titleText: "Header 4",
			sortable: true,
			fixed: "right",
			render: (row: any) => <Button type="primary">{row}</Button>
		}
		// Add more columns if needed
	],
	onSort: (columnName: string, sortOrder: "asc" | "desc") => console.log("Sorting:", columnName, sortOrder),
	onPageChange: (current: number, pageSize: number) => console.log("Page changed:", current, pageSize),
	onExport: () => console.log("Export clicked"), // 传这个方法就有导出按钮
	onColumnDrag: (sourceIndex: number, destinationIndex: number) => {
		console.log("Column dragged from", sourceIndex, "to", destinationIndex)
	},
	onChange: (pagination: any, filters: any, sorter: any) => {
		// 这里是什么，pagination不是页码？？sorter是排序目标个变化的所有参数都在这！
		console.log(pagination, filters, sorter)
	}
}
